<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in currentRouteArr" :key="item.path">{{
        item.meta.name
    }}</el-breadcrumb-item>
    <!-- <el-breadcrumb-item
      ><a href="/">promotion management</a></el-breadcrumb-item
    >
    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
    <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
  </el-breadcrumb>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // currentRouteArr: [],
    };
  },
  mounted() {
    console.log("lll", this.$route);
    // this.$route.matched.forEach((item, index) => {
    //   if (index > 0) {
    //     this.currentRouteArr.push(item);
    //   }
    // });
  },
  computed: {
    currentRouteArr: {
      get() {
        return this.$route.matched.slice(1);
      },
      set(val) { },
    },
  },
  watch: {
    $route: {
      handler(val) {
        // val 为改变后的$route
        // console.log(val);
        // this.currentRouteArr = [];
        // // val.fullname = val.firstname + val.lastname;
        // val.matched.forEach((item, index) => {
        //   if (index > 0) {
        //     this.currentRouteArr.push(item);
        //   }
        // });
        this.currentRouteArr = val.matched.slice(1);
      },
      deep: true, // 表示深度监听
      immediate: true, // 立即马上监听
    },
  },
};
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  margin-bottom: 20px;
}
</style>